<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆界面</title>
    <style>
        html,
        body {
            height: 100%;
        }

        #app {
            display: flex;
            background-color: #375660;
            height: 100%;
            min-width: 400px;
            /*  */
            min-height: 200px;
            justify-content: center;
            align-items: center;
        }

        /* 加*就表示适用于全部 */
        * {
            margin: 0;
            box-sizing: border-box;
            border: 0;
        }

        #center {
            text-align: center;
            height: 200px;
            width: 250px;
            border: 0px solid red;

        }

        h1 {
            text-align: center;
            color: aliceblue;
            font-size: 30px;
            font-family: 'Times New Roman', Times, serif;
            margin-bottom: 7px;
        }


        input {
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 4px;
        }

        .button {
            border-radius: 4px;
            width: 100%;
            /* cursor 光标 */
            cursor: pointer;
            font-weight: bold;
            font-size: 14px
        }
    </style>
</head>

<body>
    <!-- 最外层大容器 -->
    <div id="app">
        <!-- 内层中央容器 -->
        <div id="center" style="margin-left: auto;margin-right: auto;">
            <!-- 中间对齐 -->
            <!-- 四个输入框容器 -->
            <div>
                <!-- 标题 -->
                <section>
                    <h1>GRTS-MMS</h1>
                </section>
                <!-- 用户名 -->
                <section><input id="username" type="text" placeholder="name" style="height: 30px;width: 100%;">
                </section>
                <!-- 密码 -->
                <section><input id="password" type="password" placeholder="password" style="height: 30px;width: 100%;">
                </section>
                <!-- 按钮 -->
                <section><button class="button" type="button" onclick="functionoflogin()"
                        style="height: 30px; color: white; background-color: blue;">确定登录</button></section>
            </div>
            <script>
                function functionoflogin() {
                    var username=document.querySelector("#username").value;
                    var password=document.querySelector("#password").value;
                    fetch("http://localhost:8080/login-controller", {

                        method: "POST",

                        headers: {

                            "Content-Type": "application/x-www-form-urlencoded",

                        },

                        body: `username=${username}&password=${password}`,

                    }).then((response) => {
                        if (response.status === 200) {
//                      这是为了将json字符串变成一个对象
                            response.json().then((user) => {
                                console.log(user);
                                sessionStorage.setItem("Currentuser",JSON.stringify(user));
                            });
                        } else {

                            alert("登录失败，请检查帐号或密码");

                        }
                    })
                }
                



                        // var username=document.querySelector("#username").value;
                        // var password=document.querySelector("#password").value;
                        // var xhr = new XMLHttpRequest();

                        // xhr.open("POST", "http://localhost:8080/login-controller");

                        // xhr.setRequestHeader(

                        //     "Content-Type",

                        //     "application/x-www-form-urlencoded"

                        // );

                        // xhr.send(`username=${username}&password=${password}`); 

                        // xhr.onload = function () {

                        //     if (xhr.status === 200) {

                        //         const user = JSON.parse(xhr.responseText);

                        //         console.log(user);

                        //     } else {

                        //         alert("登录失败，请检查帐号和密码");

                        //     }
                        // }
                  
            </script>
        </div>
    </div>
</body>

</html>